<template>
  <div>
    <div id="songs">
      <div v-if="this.author.length">
        <div>
          <img v-if="this.author[0].coverImgUrl" id="img" :src="this.author[0].coverImgUrl">
        </div>

        <div>
          <h3 id="resource">{{this.author[0].name}}</h3>
          <div style="width: 1000px;display: flex;" v-if="this.author.length!=0">
            <el-avatar :size="40" :src="this.author[0].avatarUrl"></el-avatar>
            <h5 style="margin-left: 10px;display: block;margin-top: 15px;">作者：{{this.author[0].nickname}}</h5>
            <div id="dynamic">
              <i class="el-icon-headset" style="margin-left: 0">{{this.dynamic.playCount}}</i>
              <i class="el-icon-star-off">{{this.dynamic.bookedCount}}</i>
              <i class="el-icon-chat-dot-round">{{ this.dynamic.commentCount}}</i>
              <i class="el-icon-share">{{this.dynamic.shareCount}}</i>
            </div>
          </div>
          <div id="introduce">
            <span style="color: #303133">歌单简介：</span>
            <span style="color: #606266;">{{this.author[0].description}}</span>
          </div>
          <div v-for="o in this.author[0].tags" :key="o.index">
            <span style="float: left;margin-right: 10px">
              <el-tag effect="light" type="info" size="small" style="margin-top: 10px;color: red">{{o}}</el-tag>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%;display: flex">
      <el-row>
        <el-col :md="12" :xs="24">
          <div id="list">
            <m-song-table :data="tableData" :height="500"></m-song-table>
          </div>
        </el-col>
        <el-col :md="12" :xs="24">
          <div id="comment">
            <m-comment :data="commentData"></m-comment>
          </div>
        </el-col>
      </el-row>


    </div>
  </div>
</template>

<script>
  import musicApi from '@/musicApi/apis/songs';
  import music from "@/until/js/music";
  import comment from "@/components/text/comment";
  import songTable from "@/components/aplayer/songTable";
  export default {
    name: "songList",
    components: {
      "m-comment": comment,
      'm-song-table': songTable
    },
    data() {
      return {
        id: 0,
        author: [],
        data: [],
        tableData: [],
        dynamic: [],
        commentData: []
      }
    },
    mounted() {
      //保存home传入的歌单id
      this.id = this.$route.query.id
      console.log('当前歌单id：' + this.id)
      this.getPersonalized(this.id);
      this.getPersonalizedDynamic(this.id)
      this.getPersonalizedAllSongs(this.id)
      this.getPersonalizedComments(this.id)
    },
    methods: {
      //获取歌单信息
      async getPersonalized(id) {
        await musicApi.getPersonalizedRes(id).then(res => {
          this.data = res.data.playlist;
          //获取歌单作者信息
          let art = {}
          let arrs = []
          art.coverImgUrl = this.data.coverImgUrl;
          art.description = this.data.description;
          art.tags = this.data.tags
          art.avatarUrl = this.data.creator.avatarUrl;
          art.nickname = this.data.creator.nickname;
          art.backgroundUrl = this.data.creator.backgroundUrl;
          arrs.push(art);
          this.author = arrs
        })
      },
      //获取歌单详情动态数据
      async getPersonalizedDynamic(id) {
        await musicApi.getPersonalizedDynamic(id).then(res => {
          this.dynamic = res.data;
        })
      },
      //获取歌单所有歌曲
      async getPersonalizedAllSongs(id) {
        await musicApi.getPersonalizedAllSongs(id).then(res => {
          this.tableData = music.getSongsData(res.data.songs)
        })
      },
      //获取歌单热评
      async getPersonalizedComments(id) {
        await musicApi.getPersonalizedComment(id).then(commentRes => {
          this.data = commentRes.data.comments;
          let arr = [];
          for (var i = 0; i < this.data.length; i++) {
            let obj = {}
            obj.avatarUrl = this.data[i].user.avatarUrl;
            obj.nickname = this.data[i].user.nickname;
            obj.content = this.data[i].content;
            obj.timeStr = this.data[i].timeStr;
            obj.location = this.data[i].ipLocation.location;
            arr.push(obj)
          }
          this.commentData = arr
        })
      },
      //获取所在行的歌曲信息
      async getSongId(row) {
        this.$store.commit('SET_Song_Id', row);
      }
    }
  }
</script>

<style scoped>
  #songs {
    margin-top: 70px;
  }

  #img {
    display: block;
    position: relative;
    height: 200px;
    float: left;
    margin-right: 25px;
    margin-bottom: 10px;
  }

  #resource {}

  #list {
    width: 100%;
    display: block;

  }

  #dynamic i {
    padding-left: 20px;
    margin-top: 15px;
    color: #606266  ;
  }

  #comment {
    margin-left: 30px;
    display: block;
  }

  #introduce {
    font-size: larger;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  /*滚动条的宽度*/

  #list::-webkit-scrollbar {
    width: 4px;
    height: 6px;
    background-color: #17264d;
  }

  /*滚动条的滑块*/

  #list::-webkit-scrollbar-thumb {
    border-radius: 3px;
    -webkit-box-shadow: #17264d;
    background-color: #3858ab;
  }
</style>